<#include "/admin/_inc/_head.html"/>
<#include "/admin/_inc/_layout.html" />
<!DOCTYPE html>
<html lang="en">

<head>
    <@head />
    <link href="/assets/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />

</head>

<body>
    <@layout>
        <nav class="breadcrumb">
            <!--<i class="Hui-iconfont">&#xe67f;</i> 首页
    <span class="c-gray en">&gt;</span>
    系统管理
    <span class="c-gray en">&gt;</span>
    基本设置
    <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
-->
            <a class="btn btn-success btn-refresh radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);"
                title="刷新">
                <i class="Hui-iconfont">&#xe68f;</i>
            </a>
        </nav>
        <div class="" style="margin-top: 20px;">
            <form action="${ctx_admin}/site/update" method="post" class="form form-horizontal" id="form-add">
                <div id="tab-system" class="HuiTab">
                    <div class="tabBar cl">
                        <span>基本设置</span>
                        <span>SEO设置</span>
                        <!--<span>邮件设置</span>
                <span>其他设置</span>-->
                    </div>
                    <div class="tabCon">
                        <div class="row cl">
                            <label class="form-label col-xs-4 col-sm-2">
                                <span class="c-red">*</span>
                                网站名称：</label>
                            <div class="formControls col-xs-8 col-sm-9">
                                <input type="hidden" name="siteId" value="${model.siteId}">
                                <input type="text" id="siteName" name="siteName" value="${model.siteName}" class="input-text" />
                                <!--<input type="text" id="title" name="title" placeholder="控制在25个字、50个字节以内" value="${model.title}" class="input-text">-->
                            </div>
                        </div>
                        <div class="row cl">
                            <label class="form-label col-xs-4 col-sm-2">
                                <span class="c-red">*</span>
                                网站URL：</label>
                            <div class="formControls col-xs-8 col-sm-9">
                                <input type="text" id="siteUrl" name="siteUrl" value="${model.siteUrl}" class="input-text" />
                            </div>
                        </div>

                        <div class="row cl">
                            <label class="form-label col-xs-4 col-sm-2">
                                <span class="c-red">*</span>
                                网站模板：</label>
                            <div class="formControls col-xs-8 col-sm-9">
                                <input type="text" id="theme" name="theme" value="${model.theme}" class="input-text" />
                            </div>
                        </div>

                        <div class="row cl">
                            <label class="form-label col-xs-4 col-sm-2">
                                <span class="c-red">*</span>
                                网站LOGO：</label>
                            <div class="formControls col-xs-8 col-sm-9">
                                <div class="uploader-thum-container">
                                    <div id="fileList" class="uploader-list">
                                        <#if model?exists>
                                            <#if model.logo?exists>
                                                <div id="WU_FILE_0" class="item upload-state-success">
                                                    <div class="pic-box">
                                                        <img width="30" src="${model.logo}">
                                                    </div>
                                                    <input type="hidden" name="logo" value="${model.logo}">
                                                </div>
                                            </#if>
                                        </#if>
                                    </div>
                                    <div id="filePicker">选择图片</div>
                                    <button id="btn-star" type="button" class="btn btn-default btn-uploadstar radius ml-10">开始上传</button>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="tabCon">
                        <div class="row cl">
                            <label class="form-label col-xs-4 col-sm-2">
                                <span class="c-red">*</span>
                                标题：</label>
                            <div class="formControls col-xs-8 col-sm-9">
                                <input type="text" id="title" name="title" placeholder="控制在25个字、50个字节以内" value="${model.title}" class="input-text">
                            </div>
                        </div>
                        <div class="row cl">
                            <label class="form-label col-xs-4 col-sm-2">
                                <span class="c-red">*</span>
                                关键词：</label>
                            <div class="formControls col-xs-8 col-sm-9">
                                <input type="text" id="keywords" name="keywords" placeholder="5个左右,8汉字以内,用英文,隔开" value="${model.keywords}" class="input-text">
                            </div>
                        </div>
                        <div class="row cl">
                            <label class="form-label col-xs-4 col-sm-2">
                                <span class="c-red">*</span>
                                描述：</label>
                            <div class="formControls col-xs-8 col-sm-9">
                                <input type="text" id="description" name="description" placeholder="空制在80个汉字，160个字符以内" value="${model.description}s" class="input-text">
                            </div>
                        </div>
                    </div>
                    <div class="tabCon">
                        <div class="row cl">
                            <label class="form-label col-xs-4 col-sm-2">邮件发送模式：</label>
                            <div class="formControls col-xs-8 col-sm-9">
                                <input type="text" class="input-text" value="" id="" name="">
                            </div>
                        </div>
                        <div class="row cl">
                            <label class="form-label col-xs-4 col-sm-2">SMTP服务器：</label>
                            <div class="formControls col-xs-8 col-sm-9">
                                <input type="text" id="" value="" class="input-text">
                            </div>
                        </div>
                        <div class="row cl">
                            <label class="form-label col-xs-4 col-sm-2">SMTP 端口：</label>
                            <div class="formControls col-xs-8 col-sm-9">
                                <input type="text" class="input-text" value="25" id="" name="">
                            </div>
                        </div>
                        <div class="row cl">
                            <label class="form-label col-xs-4 col-sm-2">邮箱帐号：</label>
                            <div class="formControls col-xs-8 col-sm-9">
                                <input type="text" class="input-text" value="5" id="emailName" name="emailName">
                            </div>
                        </div>
                        <div class="row cl">
                            <label class="form-label col-xs-4 col-sm-2">邮箱密码：</label>
                            <div class="formControls col-xs-8 col-sm-9">
                                <input type="password" id="email-password" value="" class="input-text">
                            </div>
                        </div>
                        <div class="row cl">
                            <label class="form-label col-xs-4 col-sm-2">收件邮箱地址：</label>
                            <div class="formControls col-xs-8 col-sm-9">
                                <input type="text" id="email-address" value="" class="input-text">
                            </div>
                        </div>
                    </div>
                    <div class="tabCon">
                    </div>
                </div>
                <div class="row cl">
                    <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                        <button onClick="article_save_submit();" class="btn btn-primary radius" type="submit">
                            <i class="Hui-iconfont">&#xe632;</i> 保存</button>
                        <!--<button onClick="layer_close();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>-->
                    </div>
                </div>
            </form>
        </div>
    </@layout>

    <@editjs />

    <script type="text/javascript" src="/assets/lib/webuploader/0.1.5/webuploader.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.skin-minimal input').iCheck({
                checkboxClass: 'icheckbox-blue',
                radioClass: 'iradio-blue',
                increaseArea: '20%'
            });
            $("#tab-system").Huitab({
                index: 0
            });

            $("#form-add").validate({
                onkeyup: false,
                focusCleanup: true,
                success: "valid",
                submitHandler: function (form) {
                    $(form).ajaxSubmit({
                        type: 'post',
                        url: form.action,
                        success: function (data) {
                            if (data.success) {
                                layer.msg(data.message, { icon: 1, time: 2000 }, function () {
                                    var index = parent.layer.getFrameIndex(window.name);
                                    //parent.$('.btn-refresh').click();
                                    parent.tgridObj.load();
                                    parent.layer.close(index);
                                });
                            } else {
                                layer.msg(data.message, { icon: 2, time: 3000 }, function () { });
                            }
                        },
                        error: function (XmlHttpRequest, textStatus, errorThrown) {
                            layer.msg('error!', { icon: 2, time: 3000 }, function () { });
                        }
                    });
                }
            });

        });
    </script>
    <script type="text/javascript">
        $(function () {
            $list = $("#fileList"),
                $btn = $("#btn-star"),
                state = "pending",
                uploader;

            var uploader = WebUploader.create({
                auto: true,
                swf: 'lib/webuploader/0.1.5/Uploader.swf',

                // 文件接收服务端。
                server: global.basePath + 'upload/logo',

                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker',

                // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                resize: false,
                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });
            uploader.on('fileQueued', function (file) {
                var $li = $(
                    '<div id="' + file.id + '" class="item">' +
                    '<div class="pic-box"><img width="30"></div>' +
                    '<div class="info">' + file.name + '</div>' +
                    '<p class="state">等待上传...</p>' +
                    '</div>'
                ),
                    //debugger
                    $img = $li.find('img');
                $list.html('');
                $list.append($li);

                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                /* uploader.makeThumb( file, function( error, src ) {
                    if ( error ) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
    
                    $img.attr( 'src', src );
                }, thumbnailWidth, thumbnailHeight ); */
            });
            // 文件上传过程中创建进度条实时显示。
            uploader.on('uploadProgress', function (file, percentage) {
                var $li = $('#' + file.id),
                    $percent = $li.find('.progress-box .sr-only');

                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<div class="progress-box"><span class="progress-bar radius"><span class="sr-only" style="width:0%"></span></span></div>').appendTo($li).find('.sr-only');
                }
                $li.find(".state").text("上传中");
                $percent.css('width', percentage * 100 + '%');
            });

            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on('uploadSuccess', function (file, response) {
                if (response.success) {
                    var data = response;
                    var $img = $('#' + file.id).find('img');
                    $('#' + file.id).addClass('upload-state-success').find(".state").text("已上传");
                    $('#' + file.id).append('<input type="hidden" name="logo" value="' + data.url + '">');
                    $img.attr('src', data.url);
                } else {
                    $('#' + file.id).addClass('upload-state-error').find(".state").text(response.message);
                }

            });

            // 文件上传失败，显示上传出错。
            uploader.on('uploadError', function (file) {

                $('#' + file.id).addClass('upload-state-error').find(".state").text("上传出错");
            });

            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on('uploadComplete', function (file) {
                $('#' + file.id).find('.progress-box').fadeOut();
            });
            uploader.on('all', function (type) {
                if (type === 'startUpload') {
                    state = 'uploading';
                } else if (type === 'stopUpload') {
                    state = 'paused';
                } else if (type === 'uploadFinished') {
                    state = 'done';
                }

                if (state === 'uploading') {
                    $btn.text('暂停上传');
                } else {
                    $btn.text('开始上传');
                }
            });

            $btn.on('click', function () {
                if (state === 'uploading') {
                    uploader.stop();
                } else {
                    uploader.upload();
                }
            });
        });

    </script>

</body>

</html>